
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>认证信息</title>
    <link rel="stylesheet" href="/css/supplies/common.css">
    <link rel="stylesheet" href="__CSS__/supplies/bootstrap.min.css">
    <link rel="stylesheet" href="__CSS__/supplies/authenticationInfo.css">
    <style>
        .select_a{
            display: block;
            width: 260px;
            height: 44px;
            text-align: center;
            color: white;
            out-line: none;
            margin: 0 auto;
            padding-top: 5px;

        }
        .select_a:hover{
            text-decoration: none;
            color: white;
            background-color: #BDBDBD;
        }
        .select_a:visited{
            text-decoration: none;
            color: white;
        }
        .select_a:active{
            text-decoration: none;
            color: white;
        }
        a:focus{
            text-decoration: none;
            color:#000;
        }
        .placeholder{
            width: 260px;
        }
        .get_address_btn{
            cursor: pointer;
            float: left;
            width: 100px;
            height: 44px;
            padding: 5px;
            color: #FFF;
            text-align: center;
            background: -webkit-linear-gradient(left, #FE5004, #FF9B02); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(right, #FE5004, #FF9B02); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(right, #FE5004, #FF9B02); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, #FE5004, #FF9B02); /* 标准的语法 */
        }
        .address_box{
            display: none;
            position: absolute;
            top: 300px;
            left: 85px;
            width: 260px;
            height: 300px;
            overflow: auto;
            padding: 20px;
            background-color: #FFF;
            border: 1px solid #DEDEDE;
        }
        .address_item{
            padding: 10px;
            border-bottom: 1px solid #DEDEDE;
            font-size: 14px;
            color: #666;
            text-align: left;
            cursor: pointer;
        }
        .address_item:hover{
            color: #D96E2E;
        }
        input{
            background-color: #FFFCF9;
        }
    </style>
</head>
<body>
<div class="reg_container"  style="z-index: -9999">
<canvas id='circle1' style="position:absolute;z-index:0;"></canvas>

<canvas id='circle2' style="position:absolute;z-index:0;"></canvas>

<canvas id='circle3' style="position:absolute;z-index:2222;"></canvas>

<canvas id='circle4' style="position:absolute;z-index:4444;"></canvas>

<canvas id='circle5' style="position:absolute;z-index:9999;"></canvas>

<canvas id='cloud1' style="position:absolute;z-index:0;"></canvas>
<canvas id='cloud2' style="position:absolute;z-index:0;"></canvas>
</div>
<div id="list_supplier"  style="z-index: -9999">
    <div class="reg_content form-inline">
        <div class="reg_left_from form-group" style="position: relative">
            <div class="form_title" style="font-size: 26px;line-height: 24px;color: #FF690D;">
                认证信息</br><span class="font_size_16">certify information</span>
            </div>
            <form id="formdata">
                <div class="form_content">
                    <div class="user_name input_div ">
                        <div class="placeholder">公司名称<br/>name of store</div>
                        <input type="text" isvalid="yes" v-bind:value="items.company" class="company input_placeholder" name="company" checkexpession="NotNull" errormsg="公司名称不能为空<br/>it is compulsory to enter your company name"/>
                    </div>
                    <div class="user_name input_div ">
                        <div class="placeholder">负责人<br/>person in charge</div>
                        <input type="text" class="manager input_placeholder" v-bind:value="items.manager" name="manager" isvalid="yes" checkexpession="NotNull" errormsg="负责人名称不能为空<br/>it is compulsory to enter the name of the person in charge"/>
                    </div>
                    <div class="user_name input_div ">
                        <div class="placeholder" style="width: 150px;">邮编<br/>postcode</div>
                        <input type="text" class="post_code input_placeholder" style="width: 150px;float: left;margin-right: 10px" v-bind:value="items.post_code" name="post_code"  isvalid="yes" checkexpession="NotNull" errormsg="邮编不能为空<br/>it is compulsory to enter your postcode"/>
                        <div class="get_address_btn" onclick="getAddressCode()">
                            <div class="title_zh">获取地址</div>
                            <div class="title_zh">get address</div>
                        </div>
                    </div>
                    <div class="user_name input_div ">
                        <div class="placeholder" id="address">地址<br/>address</div>
                        <input type="text" class="address input_placeholder" readonly v-bind:value="items.address" name="address" isvalid="yes" checkexpession="NotNull" errormsg="地址不能为空<br/>it is compulsory to enter your company's address"/>
                    </div>
                    <div class="user_name input_div ">
                        <div class="placeholder">联系电话<br/>contact phone number</div>
                        <input type="text" class="tel input_placeholder" name="tel" v-bind:value="items.tel" isvalid="yes" checkexpession="NotNull" errormsg="联系电话不能为空<br/>it is compulsory to enter your contact phone number"/>
                    </div>
                    <div class="user_name input_div ">
                        <div class="placeholder">公司注册号码<br/>company's registration number</div>
                        <input type="text" class="company_code input_placeholder" v-bind:value="items.company_code" name="company_code" isvalid="yes" checkexpession="NotNull" errormsg="公司注册号码不能为空<br/>it is compulsory to enter your company's registration number"/>
                    </div>
                </div>
                <div class="address_box">
                    <div class="address_item"></div>
                </div>
                <input type="text" name="id" value="{$id}" style="width:1px;height:1px;border:0px;">
            </form>
            <div class="commint_btn">
                <div class="select_a btn_color_right">提交</br>submit</div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/js/jquery-3.2.1.min.js"></script>
<script rel="script" src="/js/supplies/validator/validator.js"></script>
<script rel="script" src="/js/supplies/common_input.js"></script>
<script rel="script" src="/js/layer.js"></script>
<script rel="script" src="/js/supplies/common_input.js"></script>
<script src="/js/supplies/vue.min.js"></script>
<script src="/js/supplies/vue-resource.js"></script>
<script>
    $(function(){
        $(".input_div").each(function(){
            if(0!==$(this).children('input').val().length) {
                $(this).children('div').css("display","none");
            }else{
                $(this).children('div').css("display","block");
            }
        })
    })

    var app = new Vue({
        el: "#list_supplier",
        data: {
            items: [],
            data:[],
            searchs: {supplier_id:''},
        },
        methods: {
            req: function () {
                var url = '__APP__/apishop/apishop/shopInfo';
                this.$http.post(url, this.searchs, {
                    emulateJSON: true
                }).then(function (res) {
                    //console.log(res);
                    this.items = res['body'].data;
                    isShowInputTips();
                }, function (res) {

                });
            },
        },
        mounted: function () {
            this.searchs.supplier_id = localStorage.getItem("suppliesId");
            this.req();
        }
    })

    $(".input_cont_box").click(function () {
        $(this).find(".input_title").hide();
        $(this).find("input").focus();
    });
    /*$("input").blur(function () {
        if($(this).val() == ""){
            $(this).next().show();
        }else {
            $(this).next().hide();
        }
    })
    $("input[type = 'password']").blur(function () {
        if($(this).val() == ""){
            $(this).next().show();
        }else {
            $(this).next().hide();
        }
    })*/
    function  getAddressCode(){
        var post_code = $('.post_code').val();
        $.ajax({
            type: "post",
            url: "__APP__/apishop/index/getAreaListByCode",
            cache: false,
            data: {code:post_code},
            dataType: "json",
            success: function (data) {
                var html = "";
                if(!data['list']){
                    layer.msg('该邮编不存在/post code is not exist',{
                        skin:'winning-class',//自定义样式winning-class
                        time:3000
                    });
                }else{
                    for (var i=0;i<data['list'].length;i++)
                    {
                        var place_name = data.list[i].place_name.replace(/(^\s*)|(\s*$)/g, "");
                        var admin_name3 = data.list[i].admin_name3.replace(/(^\s*)|(\s*$)/g, "");
                        var admin_name2 = data.list[i].admin_name2.replace(/(^\s*)|(\s*$)/g, "");
                        var admin_name1 = data.list[i].admin_name1.replace(/(^\s*)|(\s*$)/g, "");
                        html += "<div class='address_item' onclick='selectAddressCode("+JSON.stringify(data.list[i])+")'>"+data.list[i].place_name+","+data.list[i].admin_name3+","+data.list[i].admin_name2+","+data.list[i].admin_name1+"</div>"
                    }
                    $('.address_box').html(html);
                    $('.address_box').show();

                }
            }
        });
    }
    function selectAddressCode(address){
        $('.address_box').hide();
        $address = address.place_name+","+address.admin_name3+","+address.admin_name2+","+address.admin_name1;
        $('.address').val($address);
        $('#address').hide();
    }
    //提交
    $('.commint_btn').click(function(){
        if ($('#formdata').Validform()) {
            $.ajax({
                type: "post",
                url: "__APP__/apishop/apishop/setSupplierInfo",
                cache: false,
                data: $('#formdata').serialize(),
                dataType: "json",
                success: function (data) {
                    //console.log(data);
                    if(200 == data['status']){
                        location.href = "__APP__/supplies/index/login";
                    }
                    else{
                        layer.confirm(data['msg'],{
                            move:false
                        }) ;
                    }
                }
            });
        }
    })

    var circle1 = document.getElementById("circle1");
    var circle2 = document.getElementById("circle2");
    var circle3 = document.getElementById("circle3");
    var circle4 = document.getElementById("circle4");
    var circle5 = document.getElementById("circle5");

    var cloud1 = document.getElementById("cloud1");
    var cloud2 = document.getElementById("cloud2");

    circle1.width = circle2.width = circle3.width = circle4.width = circle5.width = cloud1.width = cloud2.width = document.body.clientWidth;
    circle1.height = circle2.height = circle3.height = circle4.height = circle5.height =  cloud1.height = cloud2.height= document.body.clientHeight;

    var width=document.body.clientWidth-30;
    var widthleft=document.body.clientWidth/12;
    var widthright=document.body.clientWidth/1.2;
    var height_top=document.body.clientHeight/8;
    drawcircle("circle1", widthleft, height_top, 50,'#FFE7D8','#FFDFCC');

    drawcircle("circle2", widthright, 250, 35,'#FFE7D8','#FFDFCC');

    drawcircleo("circle3", width, 20, 120,'#FEE0CE','#FEFEFE');

    drawcirclet("circle4", width, 20, 75,'#FEE0CE','#FEFEFE');

    drawcirclef("circle5", width, 20, 40,'#FEE0CE','#FEFEFE');

    // drawcircle("circle3", 1300, 300, 35,'#FEFEFE','#FF690D');

    //绘制右上角
    function drawcircle(canvasName, cx, cy, cw, fircolor , seccolor) {
        var draw = document.getElementById(canvasName);
        if (draw.getContext) {
            var context = draw.getContext('2d');
            //开始路径
            context.beginPath();
            //绘制外圆
            context.arc(cx, cy, cw, 0, 360, false);
            var gradient = context.createRadialGradient(cx, cy, 30, cx, cy, 50);
            gradient.addColorStop(0, fircolor);//    //0表示开始
            gradient.addColorStop(1, seccolor);    //1表示结束
            //使用定义好的渐变属性
            context.fillStyle = gradient;    //填充的时候放入渐变
            context.fill();//画实心圆
        }
    }
    //绘制圆
    function drawcircle(canvasName, cx, cy, cw, fircolor , seccolor) {
        var draw = document.getElementById(canvasName);
        if (draw.getContext) {
            var context = draw.getContext('2d');
            //开始路径
            context.beginPath();
            //绘制外圆
            context.arc(cx, cy, cw, 0, 360, false);
            var gradient = context.createRadialGradient(cx, cy, 30, cx, cy, 50);
            gradient.addColorStop(0, fircolor);//    //0表示开始
            gradient.addColorStop(1, seccolor);    //1表示结束
            //使用定义好的渐变属性
            context.fillStyle = gradient;    //填充的时候放入渐变
            context.fill();//画实心圆
        }
    }

    //绘制右上角顶部大圆
    function drawcircleo(canvasName, cx, cy, cw, fircolor , seccolor) {
        var draw = document.getElementById(canvasName);
        if (draw.getContext) {
            var context = draw.getContext('2d');
            //开始路径
            context.beginPath();
            //绘制外圆
            context.arc(cx, cy, cw, 0, 360, false);
            var gradient = context.createRadialGradient(cx, cy, 30, cx, cy, 100);
            gradient.addColorStop(0, fircolor);//    //0表示开始
            gradient.addColorStop(1, seccolor);    //1表示结束
            //使用定义好的渐变属性
            context.fillStyle = gradient;    //填充的时候放入渐变
            context.fill();//画实心圆
        }
    }
    //绘制顶部大圆
    function drawcircleo(canvasName, cx, cy, cw, fircolor , seccolor) {
        var draw = document.getElementById(canvasName);
        if (draw.getContext) {
            var context = draw.getContext('2d');
            //开始路径
            context.beginPath();
            //绘制外圆
            context.arc(cx, cy, cw, 0, 360, false);
            var gradient = context.createRadialGradient(cx, cy, 30, cx, cy, 100);
            gradient.addColorStop(0, fircolor);//    //0表示开始
            gradient.addColorStop(1, seccolor);    //1表示结束
            //使用定义好的渐变属性
            context.fillStyle = gradient;    //填充的时候放入渐变
            context.fill();//画实心圆
        }
    }
    //绘制右上角顶部中圆
    function drawcirclet(canvasName, cx, cy, cw, fircolor , seccolor) {
        var draw = document.getElementById(canvasName);
        if (draw.getContext) {
            var context = draw.getContext('2d');
            //开始路径
            context.beginPath();
            //绘制外圆
            context.arc(cx, cy, cw, 0, 360, false);
            var gradient = context.createRadialGradient(cx, cy, 30, cx, cy, 80);
            gradient.addColorStop(0, fircolor);//    //0表示开始
            gradient.addColorStop(1, seccolor);    //1表示结束
            //使用定义好的渐变属性
            context.fillStyle = gradient;    //填充的时候放入渐变
            context.fill();//画实心圆
        }
    }
    //绘制顶部中圆
    function drawcirclet(canvasName, cx, cy, cw, fircolor , seccolor) {
        var draw = document.getElementById(canvasName);
        if (draw.getContext) {
            var context = draw.getContext('2d');
            //开始路径
            context.beginPath();
            //绘制外圆
            context.arc(cx, cy, cw, 0, 360, false);
            var gradient = context.createRadialGradient(cx, cy, 30, cx, cy, 80);
            gradient.addColorStop(0, fircolor);//    //0表示开始
            gradient.addColorStop(1, seccolor);    //1表示结束
            //使用定义好的渐变属性
            context.fillStyle = gradient;    //填充的时候放入渐变
            context.fill();//画实心圆
        }
    }
    //绘制右上角顶部小圆
    function drawcirclef(canvasName, cx, cy, cw, fircolor , seccolor) {
        var draw = document.getElementById(canvasName);
        if (draw.getContext) {
            var context = draw.getContext('2d');
            //开始路径
            context.beginPath();
            //绘制外圆
            context.arc(cx, cy, cw, 0, 360, false);
            var gradient = context.createRadialGradient(cx, cy, 30, cx, cy, 50);
            gradient.addColorStop(0, fircolor);//    //0表示开始
            gradient.addColorStop(1, seccolor);    //1表示结束
            //使用定义好的渐变属性
            context.fillStyle = gradient;    //填充的时候放入渐变
            context.fill();//画实心圆
        }
    }
    //绘制顶部小圆
    function drawcirclef(canvasName, cx, cy, cw, fircolor , seccolor) {
        var draw = document.getElementById(canvasName);
        if (draw.getContext) {
            var context = draw.getContext('2d');
            //开始路径
            context.beginPath();
            //绘制外圆
            context.arc(cx, cy, cw, 0, 360, false);
            var gradient = context.createRadialGradient(cx, cy, 30, cx, cy, 50);
            gradient.addColorStop(0, fircolor);//    //0表示开始
            gradient.addColorStop(1, seccolor);    //1表示结束
            //使用定义好的渐变属性
            context.fillStyle = gradient;    //填充的时候放入渐变
            context.fill();//画实心圆
        }
    }
    var canvas = document.getElementById("cloud1");
    var ctx = canvas.getContext("2d");
    var width_yuntop=document.body.clientWidth/2-100;
    var height_yuntop=document.body.clientHeight/7;
    drawCloud(ctx, width_yuntop, height_yuntop, 100);

    var cloud2 = document.getElementById("cloud2");
    var ctx2 = cloud2.getContext("2d");
    var width_yun2left=document.body.clientWidth/4-100;
    var height_yun2left=document.body.clientHeight/2;
    drawCloud(ctx2, width_yun2left, height_yun2left, 130);

    /*渲染单个云朵
    context:  canvas.getContext("2d")对象
    cx: 云朵X轴位置
    cy: 云朵Y轴位置
    cw: 云朵宽度
    */
    function drawCloud(context, cx, cy, cw) {
        //云朵移动范围即画布宽度
        var maxWidth = context.canvas.width;
        //如果超过边界从头开始绘制
        cx = cx % maxWidth;
        //云朵高度为宽度的60%
        var ch = cw * 0.6;
        //开始绘制云朵
        context.beginPath();
        context.fillStyle = "white";
        //创建渐变
        var grd = context.createLinearGradient(0, 0, 0, cy);
        grd.addColorStop(0, 'rgba(255,255,255,0.8)');
        grd.addColorStop(1, 'rgba(255,255,255,0.5)');
        context.fillStyle = grd;
        context.fill();
        //在不同位置创建5个圆拼接成云朵现状
        context.arc(cx, cy, cw * 0.19, 0, 360, false);
        context.arc(cx + cw * 0.08, cy - ch * 0.3, cw * 0.11, 0, 360, false);
        context.arc(cx + cw * 0.3, cy - ch * 0.25, cw * 0.25, 0, 360, false);
        context.arc(cx + cw * 0.6, cy, cw * 0.21, 0, 360, false);
        context.arc(cx + cw * 0.3, cy - ch * 0.1, cw * 0.28, 0, 360, false);
        context.closePath();
        context.fill();
    }
</script>
</html>